<template>
  <el-form ref="formdata" :inline="true" :model="formdata" class="demo-form-inline mygameform">
    <el-form-item label="日期区间" >
      <el-date-picker
        v-model="formdata.date"
        ref="formdata.date"
        type="daterange"
        align="right"
        value-format="yyyy-MM-dd"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="query">查询</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
    export default {
        name: "date-qry-param",
      data() {
        return {
          pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);

              }
            }, {
              text: '最近两个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
                picker.$emit('pick', [start, end]);
              }
            }]
          },
          formdata: {
            date:''
          }
        }
      },
      watch:{
        '$route': 'initForm'
      },
      methods:{
          initForm(){
            this.formdata.date="";
          },
          query:function () {
            let param = this.formdata;
            const now = new Date();
            let edate = param.date?param.date[1] : now.Format("yyyy-MM-dd");
            let sdate = param.date?param.date[0] :new Date(now.getFullYear(),now.getMonth(),1).Format("yyyy-MM-dd");
            let p = {'startdate':sdate,'enddate':edate};
            this.$emit('queryForm',p);
          }
      }
    }
</script>

<style>
.mygameform{
  margin-top: 10px;
}
</style>
